<template>
	<div>
		<el-card shadow="hover" class="card_box">
			<el-row :gutter="15">
				<el-form ref="add_form" :model="formData" :rules="rules" size="medium" label-width="100px">
					<el-col :span="12">
						<el-form-item label="编号" prop="code">
							<el-input v-model="formData.code" placeholder="请输入编号" clearable :style="{width: '100%'}">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="formData.name" placeholder="请输入姓名" clearable :style="{width: '100%'}">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="学院" prop="value">
							<el-cascader v-model="formData.value" :options="valueOptions" :props="valueProps"
								:style="{width: '100%'}" placeholder="请选择学院" clearable></el-cascader>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="密码" prop="password">
							<el-input v-model="formData.password" placeholder="请输入密码" clearable
								prefix-icon='el-icon-lock' show-password :style="{width: '100%'}"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="身份" prop="identity">
							<el-radio-group v-model="formData.identity" size="medium">
								<el-radio v-for="(item, index) in identityOptions" :key="index" :label="item.value"
									:disabled="item.disabled">{{item.label}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>



					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-radio-group v-model="formData.sex" size="medium">
								<el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
									:disabled="item.disabled">{{item.label}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item size="large">
							<el-button type="primary" @click="submitForm">提交</el-button>
							<el-button @click="resetForm">重置</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item size="large">
							<input type="file" ref="myfile" size="medium"></input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item size="large">
							<el-button @click="handleClick()" type="success" size="medium">快速添加</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</el-card>
	</div>
</template>
<script>
	import {
		getAllCollege,
		addUser,
		upload
	} from '../../../api/system.js'

	export default {
		props: [],
		data() {
			return {

				formData: {
					value: [],
					code: undefined,
					name: '',
					collegeid: 0,
					categoryid: 0,
					classid: 0,
					sex: 1,
					identity: 0,
					password: '',
				},
				rules: {
					code: [{
							required: true,
							message: '请输入学号/工号',
							trigger: 'blur'
						},
						{
							pattern: /^(\d{10}|\d{6})$/,
							message: '请输入正确的账号格式',
							trigger: 'blur'
						}
					],

					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					value: [{
						required: true,
						type: 'array',
						message: '请至少选择一个学院',
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: '性别不能为空',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				valueOptions: [],
				sexOptions: [{
					"label": "男",
					"value": 1
				}, {
					"label": "女",
					"value": 2
				}],
				identityOptions: [{
					"label": "学生",
					"value": 0
				}, {
					"label": "教师",
					"value": 1
				}],
				valueProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "list",
					"checkStrictly": true
				},
			}
		},
		created() {
			this.getValueOptions()
		},
		methods: {
			submitForm() {
				this.$refs['add_form'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					this.formData.collegeid = this.formData.value[0];
					this.formData.categoryid = this.formData.value[1];
					this.formData.classid = this.formData.value[2];
					addUser(this.formData).then(res => {
						if (res.isok) {
							this.$message(res.data1);
							this.resetForm();
						}
					});
					// this.$http.post("/user/users", this.formData).then(res => {
					// 	console.log(res.data.data1);
					// });
				})
			},
			resetForm() {
				this.$refs['add_form'].resetFields()
			},
			getValueOptions() {
				getAllCollege().then(res => {
					if (res.isok = true) {
						this.valueOptions = res.data1;
					}
				});
			},
			handleClick() {
				let myfile = this.$refs.myfile;
				let files = myfile.files;
				let file = files[0];
				var formData = new FormData();
				formData.append("file", file);
				// console.log(formData);
				upload(formData).then(res => {
					myfile.value = '';
					this.$message(res.data1);
				}).catch(error=>{
					myfile.value = '';
					this.$message("文件格式不对");
				})
			}
		}
	}
</script>
<style>
	.card_box {
		margin-top: 10px;
	}
</style>
